import React, {Component} from 'react';
import { Form, Input, Button } from "antd";
import {connect} from 'react-redux'

 class Login extends Component {
    handleSubmit = (e) =>{
        e.preventDefault();
        this.props.form.validateFields((err,values)=>{
            if(!err){
                this.props.setUserInfo({
                    userName:values.account,
                    password:values.password
                })
                this.props.history.push('/admin')
            }
        })
        
    }
    validateToNextPassword = (rule, value, callback) => {
        const { form } = this.props;
        if (!value ) {
          form.validateFields(['confirm'], { force: true });
        }
        callback();
      };
    render(){
        const { getFieldDecorator } = this.props.form;
        return(
            <div className="login central">
            <Form onSubmit={this.handleSubmit}>
                <Form.Item label="用户名：" name="account" rules={[{required: true,message: '请输入用户名',}]}>
                {getFieldDecorator('account', {
                    rules: [{ required: true, message: '请输入用户名：!' }],
                })(<Input />)}
                </Form.Item>
                <Form.Item label="密码：" name="password" rules={[{required: true,message: '请输入密码',}]}>
                {getFieldDecorator('password', {
                    rules: [
                    {
                        required: true,
                        message: '请输入密码!',
                    },
                    {
                        validator: this.validateToNextPassword,
                    },
                    ],
                })(<Input.Password />)}
                </Form.Item>
                <Form.Item className="btn">
                    <Button type="primary" htmlType="submit" className="login-form-button" >
                         Log in
                    </Button>
                </Form.Item>
            </Form>
        </div>
        )
    
    }
}
const mapDispatchToProps = (dispatch) =>{
    // 返回一个对象给组件，通过this.props获取
    return{
      setUserInfo: (data)=>{
        dispatch({type:'USERINFO',userInfo:data})
      }
    }
  }
//  null 
export default connect(null,mapDispatchToProps)(Form.create()(Login))
// export default Form.create()(Login)